<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>点击生成爱心</title>
    <style>
        .heart {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            transform: rotate(-45deg);
            animation: fall 3s linear forwards;
        }

        .heart::before,
        .heart::after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
        }

        .heart::before {
            top: -5px;
            left: 0;
        }

        .heart::after {
            left: 5px;
            top: 0;
        }

        @keyframes fall {
            0% {
                transform: rotate(-45deg) translateY(0);
                opacity: 1;
            }

            100% {
                transform: rotate(-45deg) translateY(100vh);
                opacity: 0;
            }
        }
    </style>
</head>

<body class="flex justify-center items-center h-screen bg-gray-100">
    <div id="container" class="w-full h-full"></div>
    <script>
        const container = document.getElementById('container');
        container.addEventListener('click', function (e) {
            const heart = document.createElement('div');
            heart.classList.add('heart');
            heart.style.left = e.clientX + 'px';
            heart.style.top = e.clientY + 'px';
            container.appendChild(heart);
            setTimeout(() => {
                heart.remove();
            }, 3000);
        });
    </script>
</body>

</html>